import React, { Component } from 'react'
import { get_onelist, get_subcate } from '../../utils/api'
import { SideBar, SearchBar, Swiper } from 'antd-mobile'
class cart extends Component {

    state = {
        onelist: [],
        subcate: [],
        id: "225510",
        bannerlist: []
    }

    componentDidMount() {//发送请求
        get_onelist().then((res) => {
            // console.log(res.data);
            this.setState({
                onelist: res.data.list
            })
        })
        //使页面进入直接显示当前id内容
        get_subcate({ id: this.state.id }).then((res) => {
            console.log(res.data);
            this.setState({
                //保存轮播图数据
                bannerlist: res.data.subcate.billboards,
                //保存商品数据
                subcate: res.data.subcate.subcategory
            }, () => {
                // console.log(this.state);
            })
        })
    }

    request_subcate(id) {
        get_subcate({ id }).then((res) => {
            this.setState({
                bannerlist: res.data.subcate.billboards,
                subcate: res.data.subcate.subcategory
            }, () => {
                console.log(this.state.subcate);
            })
        })
    }

    togoods(id) {
        //跳转到所有商品页
        this.props.history.push({ pathname: '/index/goods', state: { id } });
    }

    render() {
        return (
            <div className='cart'>
                <h2>分类</h2>
                <SearchBar placeholder='搜索店铺内商品' />
                <main>
                    <SideBar style={{ '--item-border-radius': '0px' }} defaultActiveKey="225510" onChange={(activeKey) => { this.request_subcate(activeKey) }}>
                        {
                            this.state.onelist.map((item) => {
                                return (
                                    <SideBar.Item key={item.id} title={item.name}></SideBar.Item>
                                )
                            })

                        }
                    </SideBar>
                    <div className="shoplistcart">
                        <Swiper autoplay loop>
                            {
                                this.state.bannerlist.map((item, index) => (
                                    <Swiper.Item key={index}>
                                        <img src={item.pic} alt="" />
                                    </Swiper.Item>
                                ))
                            }
                        </Swiper>
                        {//二级分类
                            this.state.subcate.map((item, index) => {
                                return (
                                    <div className='shoplist' key={index}>
                                        <h3>{item.name}</h3>
                                        {//三级分类
                                            item.subNavs.map((item, index) => {
                                                return (
                                                    <div onClick={() => { this.togoods(item.id) }} className='shop' key={index}>
                                                        < img src={item.pic} alt="" />
                                                        <div className="shopname">{item.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                )
                            })
                        }
                    </div>
                </main>
            </div>
        );
    }
}

export default cart;